<template>
	<view class="chat-message">
		<view
			class="chat-message-item"
			v-for="(item, index) in flist"
			:key="`${item.from}-${index}`"
			:class="[
				`${item._isMy ? 'is-right' : 'is-left'}`,
				`is-${item._mode}`,
				{
					'is-animation': item.animation,
				},
			]"
		>
			<!-- 发言时间 -->
			<view class="date" v-if="item._date">
				<text>{{ item._date }}</text>
			</view>

			<!-- 内容 -->
			<view class="main">
				<!-- 头像 -->
				<view class="avatar" @tap="toDetail(item.from)">
					<image :src="item.avatarUrl" mode="aspectFit" />
				</view>

				<!-- 详细 -->
				<view class="det">
					<template v-if="conversationType=='GROUP' && !item._isMy">
						<view class="name-sex">
							<view class="name">{{item.nick}}</view>
							<view class="man" v-if="item.sex == 0">
								<image src="@/static/icon/brief-icon-1.png" mode="aspectFill" />
							</view>
							<view class="woman" v-else-if="item.sex == 1">
								<image src="@/static/icon/brief-icon-2.png" mode="aspectFill" />
							</view>
						</view>
					</template>

					<!-- 内容 -->
					<view class="content" @tap="tapCont(item)" @longpress="longPressItem(item)">
						<!-- 文本 -->
						<template v-if="item._mode === 'text'">
							{{ item.payload.text }}
						</template>

						<!-- 图片 -->
						<template v-else-if="item._mode === 'image'">
							<cl-loading-mask
								color="#000"
								:loading="item.loading"
								:text="`${item.progress}%`"
							>
								<image mode="widthFix" :src="item.payload.imageInfoArray[0].imageUrl"></image>
							</cl-loading-mask>
						</template>

						<!-- 表情 -->
						<template v-else-if="item._mode === 'emoji'">
							<image :src="item.content.imageUrl"></image>
						</template>

						<!-- 语音 -->
						<template v-else-if="item._mode === 'voice'">
							<icon-voice
								v-if="item._isMy"
								name="icon-voice-right"
								:play="item.isPlay"
							></icon-voice>
							<!-- <text class="duration">{{ item.payload.second }}</text> -->
							<text style="color:#007AFF;">语音消息，点击收听</text>
							<icon-voice
								v-if="!item._isMy"
								name="icon-voice-left"
								:play="item.isPlay"
							></icon-voice>
						</template>

						<!-- 视频 -->
						<template v-else-if="item._mode === 'video'">
							<cl-loading-mask
								color="#000"
								:loading="item.loading"
								:text="`${item.progress}%`"
							>
								<view class="item">
									<image
										class="cover"
										:src="item.payload.thumbUrl"
										mode="aspectFill"
									/>
									<text
										v-if="!item.loading"
										class="chat-iconfont icon-play"
									></text>
								</view>
							</cl-loading-mask>
						</template>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import dayjs from "cl-uni/utils/dayjs";
import IconVoice from "./icon-voice";

// 音频
const innerAudioContext = uni.createInnerAudioContext();

// 模式，对应 contentType
const modes = ["text", "image", "emoji", "voice", "video"];

export default {
	components: {
		IconVoice,
	},

	props: {
		/*
		 * text: 文本
		 * duration: 时长
		 * videoUrl: 视频地址
		 * voiceUrl: 语音地址
		 * videoCoverUrl: 视频封面
		 * imageUrl: 图片地址
		 */
		list: Array,
		conversationType: String,
	},

	data() {
		return {
			voice: {
				timer: null,
			},
			// 登录的用户信息
			userInfo: {
				userId: this.User.userinfo.id,
				name: this.User.userinfo.username,
				avatarUrl: this.User.userinfo.user_icon
			},
		};
	},
	
	computed: {
		flist() {
			let date = "";
			
			const { avatarUrl, name, userId } = this.userInfo;
			
			let temp = this.list.map((e) => {
				// 处理日期
				e._date = date
					? dayjs(e.create_time).isBefore(dayjs(date).add(5, "minute"))
						? ""
						: e.create_time
					: e.create_time;

				date = e.create_time;

				// 是否是自己
				e._isMy = e.from == this.userInfo.userId;

				if (e._isMy) {
					e.avatarUrl = e.avatar;
					e.nick = name;
					e.userId = userId;
				}else{
					e.avatarUrl = e.avatar;
				}
				
				// 消息模型
				e._mode = e.type;
				switch(e.type){
					case "TIMTextElem": e._mode = "text";break;
					case "TIMImageElem": e._mode = "image";break;
					case "TIMVideoFileElem": e._mode = "video";break;
					case "TIMSoundElem": e._mode = "voice";break;
					default: e._mode = "error";break;
				}
				
				if(e._mode == "error"){
					return null;
				}
				
				if(e.isRevoked){
					return null;
				}

				return e;
			});
			let result = []
			for(let i = 0; i < temp.length; i++){
				if(temp[i] != null){
					result.push(temp[i])
				}
			}
			
			return result;
		},
	},

	filters: {
		duration(val) {
			return Math.ceil((val || 1) / 1000);
		},
	},

	destroyed() {
		this.voicePause();
	},

	methods: {
		// 点击内容
		tapCont(item) {
			console.log(item);
			switch (item._mode) {
				case "image":
					this.previewImage(item);
					break;
				case "video":
					this.videoPlay(item);
					break;
				case "voice":
					this.voicePlay(item);
					break;
			}
		},
		// 前往详情
		toDetail(uid) {
			if(uid == this.userInfo.userId){
				return;
			}
			uni.navigateTo({
				url: "/pages/detail/index?uid=" + uid,
			});
		},

		// 长按
		longPressItem(item) {
			switch (item._mode) {
				case "text":
					uni.setClipboardData({
						data: item.content.text,
					});
					break;
			}
		},

		// 图片预览
		previewImage(item) {
			uni.previewImage({
				current: item.payload.imageInfoArray[0].imageUrl,
				urls: this.list.filter((e) => e._mode == "image").map((e) => e.payload.imageInfoArray[0].imageUrl),
			});
		},

		// 视频播放
		videoPlay(item) {
			this.$root.video.url = item.payload.videoUrl;
			this.$root.video.visible = true;
		},

		// 播放录音
		voicePlay(item) {
			// 设置播放状态
			this.list.map((e) => {
				this.$set(e, "isPlay", e.ID == item.ID ? e.isPlay : false);
			});

			item.isPlay = !item.isPlay;

			if (item.isPlay) {
				// 开始播放
				innerAudioContext.src = item.payload.url;
				innerAudioContext.play();
			} else {
				// 暂停播放
				this.voicePause();
			}

			// 清除计时器
			clearTimeout(this.voice.timer);

			// x 秒后暂停
			this.voice.timer = setTimeout(() => {
				item.isPlay = false;
			}, item.payload.second * 1000 || 1000);
		},

		// 暂停播放
		voicePause() {
			innerAudioContext.stop();
			this.list.map((e) => {
				e.isPlay = false;
			});
		},
	},
};
</script>

<style lang="scss" scoped>
@keyframes fadeInRight {
	from {
		opacity: 0;
		transform: translate3d(100%, 0, 0);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes fadeInLeft {
	from {
		opacity: 0;
		transform: translate3d(-100%, 0, 0);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

.chat-message {
	&-item {
		font-size: 26rpx;
		padding: 20rpx;

		.date {
			text-align: center;
			margin: 10rpx 0 40rpx 0;

			text {
				background-color: #dadada;
				font-size: 24rpx;
				color: #fff;
				border-radius: 6rpx;
				padding: 4rpx 10rpx;
				letter-spacing: 1rpx;
			}
		}

		.main {
			display: flex;

			.avatar {
				flex-shrink: 0;
				height: 80rpx;

				image {
					height: 80rpx;
					width: 80rpx;
				}
			}

			.det {
				display: flex;
				flex-direction: column;
				max-width: 60%;

				

				.content {
					display: inline-block;
					padding: 24rpx 36rpx;
					border-radius: 16rpx;
					box-sizing: border-box;
					position: relative;
					font-size: 28rpx !important;
				}
			}
		}

		&.is-left {
			.main {
				.det {
					margin-left: 20rpx;
					align-items: flex-start;

					.content {
						background: #FEFDFE;
						border-radius: 30rpx;
						font-size: 35rpx;
						font-weight: 400;
						color: #1E1D1E;
					}
				}
			}
		}

		&.is-right {
			.main {
				flex-direction: row-reverse;

				.det {
					margin-right: 20rpx;
					align-items: flex-end;

					.content {
						background:#B6E98E;
						border-radius: 30rpx;
						font-size: 35rpx;
						font-weight: 400;
						color: #1E1D1E;
					}
				}
			}

			&.is-voice {
				.content {
					justify-content: flex-end;
				}
			}
		}

		&.is-animation {
			&.is-left {
				animation: fadeInLeft 0.5s ease both;
			}

			&.is-right {
				animation: fadeInRight 0.5s ease both;
			}
		}

		&.is-text {
			.content {
				max-width: 100%;
				min-width: 80rpx;
				word-wrap: break-word;
			}
		}

		&.is-text,
		&.is-voice {
			.content {
				padding: 20rpx;
				line-height: 40rpx;
				letter-spacing: 1rpx;
			}
		}

		&.is-emoji {
			.content {
				padding: 20rpx;

				image {
					height: 40rpx;
					width: 40rpx;
				}
			}
		}

		&.is-voice {
			.det {
				.content {
					display: flex;
					align-items: center;
					// width: 130rpx;

					.duration {
						&::after {
							content: '"';
						}
					}
				}
			}
		}

		&.is-video {
			.item {
				height: 300rpx;
				width: 500rpx;
				text-align: center;
				line-height: 300rpx;
				position: relative;
				overflow: hidden;

				.cover {
					height: 100%;
					width: 100%;
					position: absolute;
					left: 0;
					top: 0;
					border-radius: 10rpx;
				}

				.chat-iconfont {
					color:gray;
					font-size: 100rpx;
					position: relative;
				}
			}
		}

		&.is-image {
			.main {
				.det {
					.content {
						background-color: #fff;

						image {
							display: block;
							max-width: 300rpx;
							border-radius: 16rpx;
						}
					}
				}
			}
		}
	}
}
.name-sex{
	display: flex;
	align-items: center;
}
.man{
	image {
		width: 17rpx;
		height: 17rpx;
	}
	background-color: #58bcff;
	border-radius: 50%;
	width: 25rpx;
	height: 25rpx;
	justify-content: center;
	align-items: center;
	display: flex;
	margin-left: 10rpx;
}
.woman{
	image {
		width: 17rpx;
		height: 17rpx;
	}
	background-color: #ff5a70;
	border-radius: 50%;
	width: 25rpx;
	height: 25rpx;
	justify-content: center;
	align-items: center;
	display: flex;
	margin-left: 10rpx;
}
.name {
	margin-bottom: 10rpx;
	font-size: 24rpx;
	font-weight: 400;
	color: #bbccd8;
}
</style>
